<template>
    <el-header class="header">
        <HeaderDemo />
    </el-header>
    <div class="rightButton">
        <el-button type="primary" class="vertical-button default-contract-button" disabled>默认合同</el-button>
        <el-button type="primary" @click="GotoUserSetAgreement"
            class="vertical-button custom-contract-button">自定义合同</el-button>
    </div>
    <div class="agreement-container" ref="pdf">
        <h1>短视频剧本授权协议</h1>

        <div class="agreement-content">
            <p>
                甲方姓名（授权方）：
                <span class="editable" :contenteditable="false" style=" cursor: default;">{{ writer.real_name }}</span>
            </p>
            <p>
                甲方账号（授权方）：
                <span class="editable" :contenteditable="false" style=" cursor: default;">{{ writer.account }}</span>
            </p>
            <p>
                乙方（被授权方）：
                <span class="editable" :contenteditable="false" style=" cursor: default;">{{ user.real_name }}</span>
            </p>
            <p>
                乙方账号（授权方）：
                <span class="editable" :contenteditable="false" style=" cursor: default;">{{ user.account }}</span>
            </p>
            <p>
                鉴于甲方为短视频剧本《<span class="editable" :contenteditable="false" style=" cursor: default;">{{ work.wname
                    }}</span>》（以下简称“剧本”）的唯一合法著作权人，
                根据《中华人民共和国著作权法》及相关法律法规的规定，甲乙双方经友好协商，就甲方授权乙方使用该剧本达成如下协议：
            </p>

            <h2>第一条 剧本基本信息</h2>
            <p>
                1.1 剧本名称：
                <span class="editable" :contenteditable="false" style=" cursor: default;">{{ work.wname }}</span>
            </p>
            <p>
                1.2 剧本作者：
                <span class="editable" :contenteditable="false" style=" cursor: default;">{{ writer.uname }}</span>
            </p>
            <p>
                1.3 剧本类型：
                <span class="editable" :contenteditable="false" style=" cursor: default;">{{ work.themename
                    }}</span>（例如：短视频剧本、微电影剧本、广告剧本等）
            </p>
            <p>
                1.4 剧本题材：
                <span class="editable" :contenteditable="false" style=" cursor: default;">
                    {{ scriptTypes.map(scriptType => scriptType.bname).join('、') }}
                </span>（例如：喜剧、剧情、悬疑等）
            </p>

            <h2>第二条 授权内容</h2>
            <p>
                2.1 甲方特此授予乙方非独家、不可转让的改编权和拍摄权，即乙方有权在本协议约定的范围内，将剧本改编为短视频并进行拍摄制作。
            </p>
            <p>2.2 乙方仅限于以下方式使用剧本：</p>
            <p>
                （1）将剧本改编为时长不超过<span class="editable" @input="updateTime" :contenteditable="isDisabled" :style="owner">{{
                    hetong.time
                    }}</span>分钟的短视频；
            </p>
            <p>
                （2）在<span class="editable" @input="updateplatform" :contenteditable="isDisabled" :style="owner">{{
                    hetong.platform
                    }}</span>（指定平台，如：抖音、快手等）发布改编后的短视频；
            </p>
            <p>
                （3）在中国大陆范围内传播改编后的短视频。
            </p>

            <h2>第三条 授权期限</h2>
            <p>
                本协议自双方签字盖章之日起生效，授权期限为<span class="editable" @input="updateage_limit" :contenteditable="isDisabled"
                    :style="owner">{{
                        hetong.age_limit }}</span>年。授权期限届满后，乙方应立即停止使用剧本，并删除或销毁所有基于本协议制作的改编作品。
            </p>

            <h2>第四条 费用与支付方式</h2>
            <p>
                4.1 乙方应向甲方支付一次性授权费用人民币
                <span class="editable" @input="convertToChinese" :contenteditable="isDisabled" :style="owner">{{
                    hetong.transaction_amount
                    }}</span>
                元（大写：<span>{{ chineseAmount }}</span>元整），作为获得本协议项下改编权和拍摄权的对价。
            </p>
            <!-- <p>
                4.2 乙方应在本协议签署后<span class="editable" contenteditable="true"></span>日内，以<span class="editable"
                    contenteditable="true"></span>（银行转账、支付宝、微信等）方式全额支付上述费用至甲方指定账户。
            </p> -->

            <h2>第五条 权利与义务</h2>
            <p>5.1 甲方保证其为剧本的合法著作权人，有权进行本协议项下的授权，且剧本内容不侵犯任何第三方的合法权益。</p>
            <p>5.2 乙方应确保改编后的短视频内容不违反法律法规，不含有侵犯他人知识产权、名誉权、隐私权等合法权益的内容。</p>
            <p>5.3 乙方在使用剧本及改编作品过程中，应尊重甲方的署名权，按照甲方要求的方式在短视频及相关宣传材料中明确标注甲方为原剧本作者。</p>

            <h2>第六条 违约责任</h2>
            <p>任何一方违反本协议约定，应承担违约责任，赔偿守约方因此遭受的直接经济损失。</p>

            <h2>第七条 争议解决</h2>
            <p>因本协议引起的或与本协议有关的任何争议，双方应首先通过友好协商解决；协商不成的，任何一方均有权将争议提交甲方所在地有管辖权的人民法院诉讼解决。</p>

            <h2>第八条 其他条款</h2>
            <p>8.1 本协议未尽事宜，双方可另行签订补充协议，补充协议与本协议具有同等法律效力。</p>
            <p>8.2 本协议一式两份，甲乙双方各执一份，自双方签字或盖章之日起生效。</p>

            <div class="sign-section">
                <div class="sign-block">
                    <p>
                        甲方（签字）：
                        <span v-if="hetong.partyA" class="signature-image">
                            <img :src="hetong.partyA" alt="甲方签字" />
                        </span>
                        <span v-else class="editable" :style="dynamicStyle" @click="openSignaturePad('partyA')"></span>
                    </p>
                    <p>
                        日期：
                        <span class="date-display">{{ hetong.timeA }}</span>
                    </p>
                </div>
                <div class="sign-block">
                    <p>
                        乙方（签字）：
                        <span v-if="hetong.partyB" class="signature-image">

                            <img :src="hetong.partyB" alt="乙方签字" />
                        </span>
                        <span v-else class="editable" @click="openSignaturePad('partyB')" :style="dynamicStyle2"></span>
                    </p>
                    <p>
                        日期：
                        <span class="date-display">{{ hetong.timeB }}</span>
                    </p>
                </div>
            </div>
            <!-- <p class="examine">平台审核员:</p>
            <p class="examine">合同生效日期:</p> -->

        </div>

        <!-- 签名弹出框 -->
        <div v-if="showSignaturePad" class="signature-pad-modal">
            <canvas ref="canvasRef" class="signature-canvas"></canvas>
            <button @click="saveSignature">保存签名</button>
            <button @click="clearSignature">清除签名</button>
            <button @click="closeSignaturePad">关闭</button>
        </div>
        <!-- {{ hetong.ownerId }}|{{ user.uid }} -->
        <div class="action-buttons" v-if="hetong.ownerId == user.uid && hetong.flow == 1">
            <button @click="submitAgreement">保存设置</button>
        </div>


    </div>
    <button v-if="hetong.flow == 3" @click="handleExport">授权合同pdf下载</button>
    <button v-if="hetong.flow == 3" @click="handleImageDownload">下载图片</button>
<FooterComp style="margin-top: 20px;"/>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, inject, computed } from 'vue';
import SignaturePad from 'signature_pad';
import { useRouter, useRoute } from 'vue-router';
import CryptoJS from 'crypto-js';
import HeaderDemo from '../components/HeaderDemo.vue';
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'
import { color } from 'jodit/types/plugins/color/color';
import FooterComp    from '../components/FooterComp.vue';
import { he } from 'element-plus/es/locales.mjs';
import { downloadPDF } from "../util/pdf"  //工具方法，导出操作
import html2canvas from "html2canvas";
const axios = inject('axios'); // 注入 axios

// 获取 router 实例
const router = useRouter();

const pdf = ref<HTMLElement | null>(null);  // 导出pdf
// 导出pdf
const handleExport = () => {
    if (pdf.value) {
        downloadPDF(pdf.value, hetong.value.wid + '授权合同.pdf');
    }
};
//将合同下载为图片
const handleImageDownload = () => {
    if (pdf.value) {
        html2canvas(pdf.value, { scale: 2 }).then(function (canvas) {
            // 将 canvas 转换为图像数据 (Base64)
            const imgData = canvas.toDataURL('image/png', 1.0);

            // 创建一个链接元素用于下载
            const link = document.createElement('a');
            link.href = imgData;
            link.download = hetong.value.wid + '授权合同.png'; // 设置下载文件名
            document.body.appendChild(link); // 将链接添加到页面
            link.click(); // 触发下载
            document.body.removeChild(link); // 下载后移除链接
        });
    }
};

// 获取路由信息
const route = useRoute();

// 解密token
function getToken() {
    const encryptedToken = localStorage.getItem('token');
    if (encryptedToken) {
        const secretKey = 'your_secret_key'; // 使用相同的密钥
        const bytes = CryptoJS.AES.decrypt(encryptedToken, secretKey);
        const decryptedToken = bytes.toString(CryptoJS.enc.Utf8);
        return decryptedToken;
    }
    return null;
}

// const drawer2 = ref(false)
// const direction = ref<DrawerProps['direction']>('rtl')
// const radio1 = ref('Option 1')



// 状态变量
const chineseAmount = ref<string>('_________'); // 初始大写内容
const showSignaturePad = ref<boolean>(false); // 控制签名框显示
const currentSignatureParty = ref<'partyA' | 'partyB' | null>(null); // 当前签名的用户（甲方或乙方）
const signatures = ref<{ partyA: string | null; partyB: string | null }>({ partyA: null, partyB: null }); // 存储签名图片
const signaturePad = ref<SignaturePad | null>(null); // 存储 SignaturePad 实例
const canvasRef = ref<HTMLCanvasElement | null>(null); // canvas 表单元素
//创建输入元素是否禁用的变量
const isDisabled = ref<boolean>(true);
//购买方签署日期
const datePartyB = ref('')
const datePartyA = ref('')

// 剧本
const work = ref({
    wname: '', // 剧本名称
    typeID: '', // 类型
    copyright: '', // 版权登记号
    record: '', // 备案号
    time: '', // 授权时长
    platform: '', // 授权平台
    age_limit: '', // 授权年限
    authorization_fee: '', // 授权费用
});

// 编剧
const writer = ref({
    account: '',
    uname: '',
    real_name: '',
});

//用户信息，版权购买方
const user = ref({});
//合同初始化数据
const hetong = ref({
    // 合同信息
    wid: '',   // 剧本id
    ownerId: '',   // 剧本作者id
    licensee_id: '',   // 剧本购买方id
    transaction_amount: '',    // 合同金额
    time: '',    // 授权时长
    platform: '',  // 授权平台
    age_limit: '', // 授权年限
    partyA: '',    // 甲方签名（授权方）
    timeA: '', // 甲方签名时间
    partyB: '',    // 乙方签名（被授权方）
    timeB: '', // 乙方签名时间
    flow: '', // 合同状态
})
//流程状态变量
const FlowText = ref('');

//获取当前时间
const now = new Date();
const year = now.getFullYear(); // 年
const month = now.getMonth() + 1; // 月（0-11，所以要加1）
const day = now.getDate(); // 日
const nowtime = `${year}年${month}月${day}日`;


//头像路径
const touxiangUrl = ref('');

// 数据获取相关逻辑
//获取剧本信息
const fetchBookInfo = async (id: string) => {
    console.log("合同=》获取到的剧本id：" + id);
    try {
        const response = await axios.get(`http://localhost:8080/api/getwork/${id}`);
        work.value = response.data; // 假设后端返回的对象结构与work一致
        console.log("获取剧本信息成功：", JSON.stringify(work.value, null, 2));
    } catch (error) {
        console.error('Error fetching book info:', error);
    }
};

// //获取剧本题材列表
const scriptTypes = ref([]);  // 用于存储从后端获取的题材
const fetchScriptTypes = async (wid) => {
    try {
        const response = await axios.get(`http://localhost:8080/api/getworklabelByWid/${wid}`);
        scriptTypes.value = response.data.data; // 更新题材数据
        console.log('获取题材列表成功：', JSON.stringify(scriptTypes.value, null, 2));
        // console.log('获取题材列表成功：', JSON.stringify(scriptTypes[0].value.bname, null, 2));
    } catch (error) {
        console.error('Error fetching script types:', error);
    }
};




// 获取登录用户信息
const fetchWriterInfo = async (userid) => {
    //获取路径下的用户id

    console.log("获取用户信息11:"+userid);
    const token = getToken();
    try {
        const response = await axios.post(`http://localhost:8080/user/getUserById/${userid}`, null,{
            headers: {
                Authorization: 'Bearer ' + token,
            }
        });
        user.value = response.data.data; // 更新编剧数据
        // user.account = response.data.account;

        console.log('获取路径下uid信息：', response.data.data);
        console.log("user.account" + user.account);

    } catch (error) {
        console.error('Error fetching writer info:', error);
    }
};

//获取版权所有者信息（通过剧本uid）
const fetchWriterInfoByUid = async (uid: string) => {
    const Token = getToken();
    console.log("获取版权所有者信息:" + uid);
    try {
        const response = await axios.post(`http://localhost:8080/user/getUserById/${uid}`, null, {
            headers: {
                Authorization: 'Bearer ' + Token,
            }
        });
        console.log('获取编剧信息成功：', response.data.data);
        writer.value = response.data.data; // 更新编剧数据
        console.log('获取编剧信息成功：', writer.value);
        touxiangUrl.value = 'http://localhost:8080/api/images/' + writer.value.headlmg;
    } catch (error) { }
}

//判断登录用户身份，并设置哪些区域需要禁止修改
const checkUserIdentity = async () => {
    console.log("判断登录用户身份，并设置哪些区域需要禁止修改");
    console.log("user" + user.value.uid);
    console.log("hetong" + hetong.value.ownerId);
    if (user.value.uid != hetong.value.ownerId || hetong.value.flow != 1) {
        console.log("进入if");
        
        isDisabled.value = false;

    }
}
const dynamicStyle = computed(() => {
    if (user.value.uid != hetong.value.ownerId) {
        return {
            cursor: 'not-allowed', /* 禁用状态的光标 */
            pointerEvents: 'none',
            contenteditable: "false"
        }

    }

});
const dynamicStyle2 = computed(() => {
    if (user.value.uid == hetong.value.ownerId) {
        return {
            cursor: 'not-allowed', /* 禁用状态的光标 */
            pointerEvents: 'none',
            contenteditable: "false"
        }

    }

});
const owner = computed(() => {
    if (user.value.uid != hetong.value.ownerId || hetong.value.flow != 1) {
        return {
            cursor: "default",

        }
    }
    
})

const GotoUserSetAgreement = async () => {
    console.log("gotoUserSetAgreement");
    // router.push({ name: 'UserSetAgreement', params: { wid: work.value.wid } });
    router.push({ path: '/usersetagreement', query: { wid: work.value.wid } });

}





//获取合同的初始化数据
const fetchContractInfo = async (wid) => {
    //获取用户token
    const Token = getToken();
    work.value.wid = wid;
    try {
        const response = await axios.post(`http://localhost:8080/api/getTransaction`, work.value, {
            headers: {
                'Authorization': 'Bearer ' + Token,
                'Content-Type': 'application/json',
            },
        });
        hetong.value = response.data.data; // 假设后端返回的对象结构与work一致
        console.log("获取合同信息成功：", JSON.stringify(hetong.value, null, 2));
        //判断流程
        switch (hetong.value.flow) {
            case "1":
                FlowText.value = "交流中";
                break;
            case "2":
                FlowText.value = "版权方确认中";
                break;
            case "3":
                FlowText.value = "平台确认中";
                break;
            case "4":
                FlowText.value = "流程关闭";
                break;
        }
        convertToChinese2(hetong.value.transaction_amount)
    } catch (error) {
        console.error('出现错误：', error);
    }
}

const updateTime = (event) => {
    hetong.value.time = event.target.innerText;
};
const updateplatform = (event) => {
    hetong.value.platform = event.target.innerText; // 更新 Time 字段
};
//授权年份
const updateage_limit = (event) => {
    hetong.value.age_limit = event.target.innerText; // 更新 Time 字段
};



// 签名相关逻辑:用于打开签名板并初始化签名逻辑
const openSignaturePad = (party: 'partyA' | 'partyB') => {  //接受一个参数 party，类型为 'partyA' 或 'partyB'。在界面上调用的函数
    console.log('openSignaturePad');
    currentSignatureParty.value = party;    // 设置当前签名方：
    showSignaturePad.value = true;  // 显示签名板
    nextTick(initSignaturePad); // 等待下一次 DOM 更新，然后再执行初始化签名逻辑
};


// 初始化签名逻辑
const initSignaturePad = () => {
    console.log("canvasRef.value:" + canvasRef.value);

    if (canvasRef.value) {                                  //检查 canvasRef.value 是否存在。
        const canvas = canvasRef.value;                     // 则获取 canvasRef.value 的引用并赋值给 canvas。
        canvas.width = canvas.offsetWidth;                  // 设置 canvas 宽度和高度为实际显示尺寸
        canvas.height = canvas.offsetHeight;
        signaturePad.value = new SignaturePad(canvas);      //使用 SignaturePad 构造函数创建一个新的签名板实例，并将其赋值给 signaturePad.value。
    } else {
        console.log("canvasRef.value不存在");
        //提示用户请重新登录
        alert("请刷新页面或重新登录！");
    }
};
// 保存签名;保存用户在签名板上的签名
// const saveSignature = () => {
//     if (signaturePad.value?.isEmpty()) {    //检查签名板是否为空
//         alert("请签名！");
//     } else {
//         const dataUrl = signaturePad.value?.toDataURL();        //如果签名板不为空，则获取签名的数据URL。
//         alert("确认保存吗？一旦保存无法更改！")
//         if (user.value.uid != hetong.value.ownerId) {

//             datePartyB.value = nowtime;
//         }
//         else{
//             datePartyA.value = nowtime;
//         }
//         if (dataUrl) {
//             signatures.value[currentSignatureParty.value!] = dataUrl;   //将数据URL存储到 signatures 对象中，键为当前签名方的值。
//             uploadSignature(dataUrl, currentSignatureParty.value);      //调用 uploadSignature 函数上传签名数据。
//             closeSignaturePad();                                        //调用 closeSignaturePad 函数关闭签名板。
//         }
//     }
// };

const saveSignature = () => {
    if (signaturePad.value?.isEmpty()) { // 检查签名板是否为空
        ElMessageBox.alert("请签名！", "提示", {
            confirmButtonText: '确定',
            callback: () => {
                // 可以在这里添加用户确认后的逻辑
            }
        });
    } else {
        const dataUrl = signaturePad.value?.toDataURL(); // 获取签名的数据URL

        // 使用 ElMessageBox.confirm 来显示确认对话框
        ElMessageBox.confirm("确认保存吗？一旦保存无法更改！", "确认", {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            // 用户点击了确认

            if (user.value.uid != hetong.value.ownerId) {
                datePartyB.value = nowtime; // 设置时间
            } else {
                datePartyA.value = nowtime; // 设置时间
            }

            if (dataUrl) {
                signatures.value[currentSignatureParty.value!] = dataUrl; // 存储签名数据
                uploadSignature(dataUrl, currentSignatureParty.value, nowtime); // 上传签名
                closeSignaturePad(); // 关闭签名板
            }
        })
        // .catch(() => {
        //     // 用户点击了取消
        //     ElMessageBox.alert("操作已取消", "提示", {
        //         confirmButtonText: '确定'
        //     });
        // });
    }
};


//用于上传签名数据
//参数:
// dataUrl: 签名的 Base64 编码字符串。
// party: 签名所属方，可以是 'partyA'、'partyB'
const uploadSignature = async (dataUrl: string, party: 'partyA' | 'partyB', nowtime) => {
    console.log("party:" + party);
    console.log("dataUrl:" + dataUrl);
    console.log("hetong:" + JSON.stringify(hetong.value, null, 2));
    console.log("time:" + nowtime);

    //判断psrty时partyA还是partyB，并赋值给hetong
    if (party == "partyA") {
        hetong.value.partyA = dataUrl;
        hetong.value.timeA = nowtime;

    } else {
        hetong.value.partyB = dataUrl;
        hetong.value.timeB = nowtime;
    }
    console.log("修改后的hetong:" + JSON.stringify(hetong.value, null, 2));

    //获取用户token
    const Token = getToken();
    const response1 = await axios.post('http://localhost:8080/api/setPartyAndTime', hetong.value, {
        headers: {
            'Authorization': 'Bearer ' + Token,
            'Content-Type': 'application/json',
        },

    });
    console.log("response1:" + JSON.stringify(response1.data, null, 2));

};

const clearSignature = () => {
    signaturePad.value?.clear();
};

const closeSignaturePad = () => {
    showSignaturePad.value = false;
};

const convertToChinese = (event: InputEvent) => {
    const value = (event.target as HTMLElement).innerText.trim();
    console.log("=========" + value);
    hetong.value.transaction_amount = value;
    // if (value && !isNaN(Number(value))) {
    //   chineseAmount.value = numberToChinese(Number(value));
    //   work.Authorization_fee = value;
    //   console.log("输入的金额："+value)
    // } else {
    //   chineseAmount.value = '_________'; // 当内容为空或无效时显示默认下划线
    // }
    convertToChinese2(value)
};

const convertToChinese2 = (value) => {
    console.log("convertToChinese2");

    // 如果输入值是空则直接赋值为下划线 
    //  console.log("value.trim():"+value.trim());

    //  if (value.trim() === '') {
    //   chineseAmount.value = '_________'; // 当内容为空时显示下划线
    //   work.value.authorization_fee = ''; // 清空费用
    //   console.log("work.value.authorization_fee:"+work.value.authorization_fee);

    //   return; // 退出函数
    // }
    // 执行有效性检查，确保是可转换的数字（包括支持负数和小数）
    const numericValue = Number(value);
    console.log("numericValue:" + numericValue);
    if (!isNaN(numericValue) && isFinite(numericValue)) {
        console.log("isFinite(numericValue):" + isFinite(numericValue));
        console.log("numericValue:" + numericValue);
        console.log("value:" + value);
        chineseAmount.value = numberToChinese(numericValue);
        console.log("chineseAmount.value:" + chineseAmount.value);

        work.authorization_fee = value;
        console.log("输入的金额：" + value)
    } else {
        chineseAmount.value = '_________'; // 当内容为空或无效时显示默认下划线
        work.authorization_fee = ''; // 清空费用
    }
}

// 数字转大写的函数
function numberToChinese(n: string): string {
    // 校验输入是否为数字
    if (!/^\d*(\.\d*)?$/.test(n)) return "输入的不是数字";

    const units = ["", "拾", "佰", "仟", "万", "拾", "佰", "仟", "亿", "拾", "佰", "仟"];
    const chars = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];

    let num = String(n);
    let resultWithUnit = "";
    let decimalPart = "";

    // 处理小数部分
    if (num.indexOf(".") !== -1) {
        const decimals = num.split(".")[1];
        decimalPart = "点";
        for (let i = 0; i < decimals.length; i++) {
            decimalPart += chars[Number(decimals[i])];
        }
        num = num.split(".")[0]; // 去掉小数部分
    }

    let unitPosition = 0; // 用于跟踪当前位对应的单位
    let zeroFlag = false; // 用于跟踪零的连续出现
    let hasNonZero = false; // 标记是否出现过非零数字

    // 处理整数部分
    for (let i = num.length - 1; i >= 0; i--) {
        const currentNum = num[i];
        const unitIndex = unitPosition % 12; // 使用12个单位

        if (currentNum === "0") {
            zeroFlag = true;
        } else {
            if (zeroFlag && hasNonZero) {
                resultWithUnit = chars[0] + resultWithUnit;
                zeroFlag = false; // 连续零结束
            }
            resultWithUnit = chars[Number(currentNum)] + units[unitIndex] + resultWithUnit;
            hasNonZero = true; // 标记为已出现非零数字
        }

        // 添加单位 "万" 或 "亿"
        if (unitIndex === 4 && i > 0) {
            resultWithUnit = "万" + resultWithUnit;
        }
        if (unitIndex === 8 && i > 0) {
            resultWithUnit = "亿" + resultWithUnit;
        }

        unitPosition++;
    }

    // 特殊处理：“壹拾”应改为“拾”
    if (resultWithUnit.startsWith("壹拾")) {
        resultWithUnit = resultWithUnit.replace("壹拾", "拾");
    }

    // 去掉“亿万”的情况，比如输入1000000000
    resultWithUnit = resultWithUnit.replace(/亿万/g, "亿");

    // 去掉末尾的“零”
    resultWithUnit = resultWithUnit.replace(/零+$/, "");

    return resultWithUnit + decimalPart;
}



// 提交修改
const submitAgreement = async () => {
    console.log('提交修改');
    const HeTong = {
        wid: hetong.value.wid,
        ownerId: hetong.value.ownerId,
        licensee_id: hetong.value.licensee_id,
        transaction_amount: hetong.value.transaction_amount,
        time: hetong.value.time,
        age_limit: hetong.value.age_limit,
        platform: hetong.value.platform,
        partyA: hetong.value.partyA,
        timeA: hetong.value.timeA,
        partyB: hetong.value.partyB,
        timeB: hetong.value.timeB,
        flow: hetong.value.flow

    };
    console.log("提交修改数据：" + JSON.stringify(HeTong));
    //获取用户token
    const Token = getToken();
    try {
        await axios.post('http://localhost:8080/api/setTransaction', HeTong, {
            headers: {
                'Authorization': 'Bearer ' + Token,
                'Content-Type': 'application/json'

            }
        });
        console.log("提交成功");
    } catch (error) {
        console.error("提交修改失败：" + error);
    }
};

// const initiateTalk = () => {
//     alert('进入洽谈页面！'); // 这里可以替换为导航到洽谈页面的逻辑
//     // router.push({ name: 'TalkPage' })  // 示例：如何使用vue-router导航到”洽谈“页面
// };


// 页面挂载后获取书籍信息
onMounted(async () => {
    // 获取路径下的 id
    // luid.value = userInfo.value.uid;
    // 从 route.query 中解构获取 wid 和 uid
    const { wid, uid } = route.query;
    console.log('路由参数:', wid);
    await fetchBookInfo(wid);
    await fetchWriterInfo(uid);
    // await fetchWorkType(wid)
    await fetchScriptTypes(wid);
    await fetchWriterInfoByUid(work.value.uid)
    await fetchContractInfo(wid);
    checkUserIdentity();
});

</script>

<style scoped>
.header {
    height: 80px;
    background-color: #050504;
    margin-bottom: 10px;
}

.rightButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: 0px;
    top: 100px;
    border-radius: 0px;
}

/* 默认合同按钮样式 */
.default-contract-button {
    background-color: #ccc;
    /* 灰色背景 */
    color: #fff;
    /* 白色文字 */
    cursor: not-allowed;
    /* 禁用时的鼠标样式 */
}

/* 禁用点击效果 */
.default-contract-button:disabled {
    background-color: #ccc;
}

/* 自定义合同按钮样式 */
.custom-contract-button {
    background-color: #007bff;
    /* 蓝色背景 */
    color: #fff;
    /* 白色文字 */
    border: none;
    /* 无边框 */
    border-radius: 5px;
    /* 圆角 */
    cursor: pointer;
    /* 指针样式 */
}

/* 按钮悬停效果 */
.custom-contract-button:hover {
    background-color: #0056b3;
}

.vertical-button {
    width: 25px;
    height: 100px;
    writing-mode: vertical-rl;
    white-space: nowrap;
    border-radius: 0px;
    margin: 0;
    /* 移除外边距 */
    padding: 0;
    /* 移除内边距 */

}

/* 主容器样式 */
.agreement-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #ffffff;
    border: 1px solid #ddd;
    /* border-radius: 8px; */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.agreement-content {
    max-width: 1200px;
}

/* 标题样式 */
h1 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

/* 段落内容样式 */
p {
    text-align: justify;
    text-indent: 2em;
    /* 首行缩进 */
}

/* 二级标题样式 */
h2 {
    font-size: 18px;
    margin-top: 20px;
    font-weight: bold;
}

/* 可编辑区域样式 */
.editable {
    height: 25px;
    /* background-color: #007bff; */
    position: relative;
    outline: none;
    display: inline-block;
    min-width: 120px;

}

.editable:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid black;
}

.date-display {
    margin-top: 15px;
    cursor: default;
    /* 指针样式 */
}

/* 签名区域样式 */
.sign-section {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.sign-block {
    text-align: left;
    width: 45%;
    /* cursor: not-allowed; */
    /* 禁用状态的鼠标样式 */
}

.sign-block p {
    margin-bottom: 10px;
}

/* 按钮样式 */
button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* 签名图片 */
.signature-image img {
    max-height: 50px;
    border-bottom: 1px solid black;
    cursor: default;
    /* cursor: not-allowed; */
    /* 禁用状态的鼠标样式 */
}

/* 签名区域样式 */
.editable {
    cursor: pointer;
}

/* 签名弹出框样式 */
.signature-pad-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.signature-canvas {
    border: 1px solid black;
    width: 100%;
    height: 200px;
    display: block;
}

.disabled-area {
    cursor: not-allowed;
    /* 禁用状态的鼠标样式 */
}

.talk-box {
    position: fixed;
    bottom: 30px;
    /* 距离底部30px */
    right: 30px;
    /* 距离右侧30px */
    background-color: #42b983;
    /* 背景色 */
    border-radius: 5px;
    /* 圆角 */
    padding: 10px;
    /* 内边距 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    /* 添加阴影 */
}

.talk-button {
    padding: 10px 15px;
    /* 按钮内边距 */
    background-color: #fff;
    /* 按钮背景色 */
    border: none;
    /* 去除边框 */
    border-radius: 5px;
    /* 圆角 */
    cursor: pointer;
    /* 鼠标光标 */
    color: #007bff;
}

.talk-button:hover {
    background-color: #f0f0f0;
    /* 悬停状态的背景色 */
}

.menu-item2 {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 98px;
    /* 使其占满菜单项的高度 */
}

.image-container {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 100%;
    /* 使其占满容器的高度 */
}

.drawer-box {
    background-color: #cf7070;
}

.container {
    display: flex;
    /* 设置为 flexbox */
    justify-content: flex-start;
    /* 控制项目对齐方式 */
    align-items: flex-start;
    /* 垂直对齐方式 */
    height: 100%;
}

.list {
    background-color: #cf7070;
    height: 100%;
    width: 30%;
}

.chat {
    background-color: aqua;
    height: 100%;
    width: 70%;
}

.input {
    width: 100%;
    background-color: #d60000;
    height: 90%;
}

.list-item1 {
    width: 100%;
    height: 50px;
    background-color: #007bff;
}

.examine {

    margin: 1px;
}
</style>